<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
    	<span class="title">检索管理</span>
    	<div class="body">
    		<span>年级：</span>
    		<select class="select" v-model="gradeSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
    			<option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
    		</select>
    		<el-button type="primary" @click="getTableData()" size="small">确认</el-button>
        <el-button type="primary" @click="clearSearch()" size="small">重置</el-button>
    		<div class="right">
    			<a :href="this._httpUrl + `schoolbus/manage/statistics/export?yxt-xtoken=${exportUrl}`">
            <el-button type="primary" size="small">导出</el-button>
          </a>
    		</div>
    	</div>
    </div>

    <div class="model query">
      <img :src="IMGBASE64.XIAOCHEGEBANRENSHU2X" class="pink">
    	<span class="title">校车各班人数</span>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="tableData" style="width: 100%">
    			<el-table-column prop="grade" label="年级名称" align="center"></el-table-column>
    			<el-table-column prop="clazz" label="班号" align="center"></el-table-column>
    			<el-table-column prop="num" label="人数" align="center"></el-table-column>
    			<el-table-column prop="classTeacherName" label="班主任" align="center"></el-table-column>
    		</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
    	</template>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      exportUrl: null,
      gradeSelect: null,
      gradeOption: [],
      total: 0,
      page: 1,
      paging: true,
      tableData: [],
      tablemsg: [{
        id: '1',
        grade: '人数合计',
        class: '--',
        num: '1234',
        teacher: '--'
      },
      {
        id: '2',
        grade: '一年级',
        class: '1',
        num: '1000',
        teacher: '欧阳俊逸'
      },
      {
        id: '3',
        grade: '一年仅',
        class: '2',
        num: '234',
        teacher: '欧阳俊逸'
      }]
    }
  },
  mounted () {
    this.getGradeData()
    this.getTableData()
    this.exportUrl = this._exportUrl()
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.getTableData()
    },
    getGradeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getTableData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/statistics', {page: (this.page), rows: 20, grade: this.gradeSelect}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.rows
          this.total = response.data.data.total
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].num = i + 1
            for (var j in this.gradeOption) {
              if (this.tableData[i].grade === parseInt(j)) {
                this.tableData[i].grade = this.gradeOption[j]
              }
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    // getSearchData () {
    //   let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
    //   let _cookie = document.cookie.split(';')
    //   let _cookieArray = []
    //   _cookie.forEach(v => {
    //     let _d = v.split('=')
    //     _cookieArray.push({
    //       key: _d[0],
    //       value: _d[1]
    //     })
    //   })
    //   if (this.gradeSelect !== null) {
    //     this.paging = false
    //     this.$http.post(httpUrl + 'schoolbus/manager/num', {grade: this.gradeSelect}, {'headers': {'yxt-xtoken': _cookieArray[0].value}}).then(function (response) {
    //       if (response.ok) {
    //         this.tableData = response.data.data.rows
    //         for (var i = 0; i < this.tableData.length; i++) {
    //           this.tableData[i].num = i + 1
    //           for (var j in this.gradeOption) {
    //             if (this.tableData[i].grade === parseInt(j)) {
    //               this.tableData[i].grade = this.gradeOption[j]
    //             }
    //           }
    //         }
    //       }
    //     })
    //   } else {
    //     this.getTableData()
    //     this.paging = true
    //   }
    // },
    clearSearch () {
      this.gradeSelect = null
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
	.retrieval{
	  .body{
	    span{
	    	margin-left: 4%;
	    }
	    span:first-child{
	    	margin-left: 0;
	    }
	    .right{
	    	float: right;
	    	margin-right: 10px;
	    }
	  }
	  .select{
	    width: 13%;
	    border: 0;
	    border-bottom: 1px solid #D7D7D7;
      margin-right: 2%;
	  }
	}

</style>
